@extends('layouts.appManager')
@section('title')推荐系统@endsection

@section('content')
{{--    <input type="hidden" id="serverId" value="{{$server->id}}">--}}
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card panel mb-4">
                    <div class="card-body ">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="推荐系统" name="first">
                                <main role="main" class="flex-shrink-0">
                                    <div class="container">
                                        <h2 class="my-3">推荐方法</h2>
                                        <p>复制推荐链接，发给新用户注册管理系统，新用户即为你推荐的用户。</p>
                                        <p>用户打开你的推荐链接后，无论多久后注册，都是你推荐的用户，除非他又打开了其他人的推荐链接。</p>

                                        <div class="input-group my-5">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">推荐链接：</span>
                                            </div>
                                            <input type="text" class="form-control" value="{{$url}}" readonly>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button" id="button-addon2"  data-clipboard-text="{{$url}}">点击复制</button>
                                            </div>
                                        </div>

                                        <h2 class="mb-3 mt-5">奖励规则</h2>
                                        <p>用户充值，此用户的推荐人，会获得 <code>充值金额10%</code> 的积分奖励，可提现。</p>
                                        <p>用户的 <code>服务器有玩家充值</code>，此用户的推荐人，会获得 <code>充值金额10%</code> 的积分奖励，可提现。</p>



                                        <h2 class="mb-3 mt-5">推荐列表</h2>
                                        <table class="table table-sm">
                                            <thead>
                                            <tr>
                                                <th scope="col">昵称</th>
                                                <th scope="col">邮箱</th>
                                                <th scope="col">注册时间</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($list as $item)
                                                <tr>
                                                    <td>{{$item->name}}</td>
                                                    <td>{{$item->email}}</td>
                                                    <td>{{$item->created_at}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                        <div class="mt-5">
                                            {{ $list->links() }}
                                        </div>

                                    </div>
                                </main>
                            </el-tab-pane>
                            <el-tab-pane label="视频推广奖励" name="second">视频推广奖励</el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/clipboard.js/2.0.10/clipboard.min.js" type="application/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                activeName: 'first',
                serverId: $('#serverId').val(),
                tableData: [],
                curItem:null,
                dialog:false,
                dialogConf:false,
                confList:[]
            },
            mounted() {
                let clipboard = new ClipboardJS('.btn');
                let t=this;
                clipboard.on('success', function(e) {
                    t.$message.success('复制成功');
                });
                // this.getList();
            },
            methods:{
                getList(){
                    post('list/'+this.serverId,{},res=>{
                        console.log(res);
                        this.tableData=res;
                    },this)
                },
                addShow(){
                    if (this.tableData.length>=60){
                        this.$message.info('最多添加60个视频');
                        return;
                    }
                    this.curItem={};
                    this.dialog=true;
                },
                add(){
                    if (this.curItem.path){
                        this.adddo();
                    } else {
                        this.$message.error('请输入配置文件全路径');
                    }
                },
                adddo(){
                    post('add/'+this.serverId,this.curItem,res=>{
                        console.log(res);
                        if (res.err===0) {
                            this.$message.success('添加成功');
                            this.dialog=false;
                            this.getList();
                        }else{
                            this.$message.error(res.msg);
                        }
                    },this)
                },
                config(item){
                    this.curItem=item;
                    post('conf/'+this.serverId,{id:this.curItem.id},res=>{
                        console.log(res);
                        if (res.err===0) {
                            this.confList=res.data;
                            this.dialogConf=true;
                        }else{
                            this.$message.error(res.msg);
                        }
                    },this)
                },
                confSave(){
                    let confList= "";
                    for(let key in this.confList){
                        confList+=(key+'='+this.confList[key]['value']+"\n")
                    }
                    post('confSave/'+this.serverId+'/'+this.curItem.id,{data:confList},res=>{
                        console.log(res);
                        if (res.err===0) {
                            this.$message.success('保存成功');
                        }else{
                            this.$message.error(res.msg);
                        }
                    },this)
                },
                del(item){
                    this.$confirm('此操作将删除此配置, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log(1);
                        post('del/'+this.serverId+'/'+item.id,{},res=>{
                            console.log(res);
                            if (res.err===0){
                                this.$message.success('删除成功');
                                this.getList();
                            } else{
                                this.$message.error(res.msg);
                            }
                        },this)
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });
                },

                update(){
                    post('/manager/server/'+this.serverId+'/videoUpdate',this.curItem,res=>{
                        console.log(res);
                        if (res.err===0) {
                            this.$message.success('修改成功');
                            this.dialog=false;
                        }else {
                            this.$message.error(res.msg);
                        }
                    },this);
                },
                edit(item){
                    this.curItem=item;
                    this.dialog=true;
                },

            }
        });
    </script>
@endsection


